<template>
    <el-dialog v-if="dialogVisible" :close-on-click-modal='false' title="选择标签" top="5vh" :visible.sync="dialogVisible" @close="resetForm()" width="600px">
        <div class="flexbox flexcenter search_line">
            <el-input placeholder="请输入关键词筛选标签" size="small" suffix-icon="el-icon-search" v-model="tagQuery" class="flex"></el-input>
            <el-button type="primary" size="small" icon="el-icon-plus" style="margin-left:12px" @click="addTag">
                添加标签
            </el-button>
        </div>
        <div class="tag_list" v-loading="loading" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0)">
            <el-checkbox-group v-model="subForm.tags_id" class="tag_check">
                <el-checkbox :label="item.id" v-for="item in filteredData(tagQuery,tagList) " :key="item.id">{{item.tags}}</el-checkbox>
            </el-checkbox-group>
        </div>
        <span slot="footer" class="dialog-footer">
            <el-button size="small" @click="resetForm()" class="el-button-width">取 消</el-button>
            <el-button size="small" type="primary" @click="submitForm()" :loading="disable" class="el-button-width">保 存</el-button>
        </span>
        <AddTag ref="add_tag" @getTagList="getTagList"/>
    </el-dialog>
</template>

<script>
import AddTag from './AddTag'
export default {
    name: "",
    data() {
        return {
            loading: false,
            disable:false,
            dialogVisible: false,
            tagQuery:"",
            checkList:[],
            tagList:[],
            subForm:{
                id:null,
                tags_id:[],
            }
        };
    },
    created() {
        
    },
    methods: {
        //获取标签
        async getTagList() {
            this.loading = true
            const { data: res } = await this.$http.post(
                "fxdata/sellibrary/tagList",
            );
            if (res.code !== 200) {
                this.loading = false
                this.$message.error(res.msg);
                return;
            } else {
                this.loading = false
                this.tagList = res.data
            }
        },

        async submitForm(){
            if(this.subForm.tags_id.length==0){
                this.$message.error("请选择标签");
                return
            }
            this.disable = true
            const { data: res } = await this.$http.post(
                "fxdata/sellibrary/tagPat",
                this.subForm
            );
            if (res.code !== 200) {
                this.disable = false
                this.$message.error(res.msg);
                return;
            } else {
                this.disable = false
                this.$emit("getDataList")
                this.resetForm()
            }
        },

        // 筛选
        filteredData(query, list) {
            var list = list,
                query = query;

            if (!query) {
                return list;
            }
            query = query.trim();

            list = list.filter(function (item) {
                if (item.tags.indexOf(query) !== -1) {
                    return item;
                }
            });
            return list;
        },

        getData(row) {
            this.dialogVisible = true;
            this.subForm.id = row.id
            this.subForm.tags_id = row.tags_id
            this.getTagList()
        },

        addTag(){
            this.$refs.add_tag.getData()
        },

        resetForm(){
            this.dialogVisible = false
        }
    },
    components: {
        AddTag
    },
};
</script>


<style scoped>
.tag_list{
    min-height: 300px;
    max-height: 510px;
    overflow-y: auto;
}
.search_line {
    border-bottom: 1px solid #ebebeb;
    padding-bottom: 20px;
}
/deep/ .tag_check .el-checkbox{
    margin-right: 12px;
    margin-top: 12px;
}
/deep/ .tag_check .el-checkbox__input{
    display: none;
}
/deep/ .tag_check .el-checkbox__label{
    height: 34px;
    line-height: 34px;
    background: rgba(165, 177, 209, 0.10);
    border-radius: 3px;
    border: 1px solid    transparent;
    padding: 0 12px;
    color: #616C85;
}
/deep/ .tag_check .el-checkbox.is-checked .el-checkbox__label{
    color: #4475ff;
    background: rgba(22, 93, 255, 0.05);
    border: 1px solid #4475ff;
}
</style>
